<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" >
<head>
    <th:block th:include="include :: header('修改出库单')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-rent-edit" th:object="${entityRent}">
            <input name="id" th:field="*{id}" id="rentId"  type="hidden">
            <h4 class="form-header h4">客户信息</h4>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">客户名称：</label>
                <div class="col-sm-8">
                    <input name="customerName" th:field="*{customerName}" class="form-control" type="text" readonly autocomplete="off">
                    <input name="customerId" th:field="*{customerId}" class="form-control"  type="hidden" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">客户身份证号：</label>
                <div class="col-sm-8">
                    <input name="customerIdCard" th:field="*{customerIdCard}" class="form-control" type="text" readonly autocomplete="off">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">客户手机号：</label>
                <div class="col-sm-8">
                    <input name="customerPhone" th:field="*{customerPhone}" class="form-control" type="text" readonly autocomplete="off">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">客户座机号：</label>
                <div class="col-sm-8">
                    <input name="customerTel" th:field="*{customerTel}" class="form-control" type="text" readonly autocomplete="off">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">客户地址：</label>
                <div class="col-sm-8">
                    <textarea id="customerAddress" th:field="*{customerAddress}" name="customerAddress" class="form-control" readonly  ></textarea>
                </div>
            </div>
            <h4 class="form-header h4">出库单信息</h4>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">出库单号：</label>
                <div class="col-sm-8">
                    <input name="rentNumber" th:field="*{rentNumber}" class="form-control" type="text" readonly autocomplete="off">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">出单时间：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <input name="issueTime" th:value="${#dates.format(entityRent.issueTime, 'yyyy-MM-dd')}" class="form-control" placeholder="yyyy-MM-dd" type="text" required>
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">计划租赁开始日期时间：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <input name="planRentStartTime" id="planRentStartTime" th:value="${#dates.format(entityRent.planRentStartTime, 'yyyy-MM-dd')}" class="form-control" placeholder="yyyy-MM-dd" type="text">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">实际租赁开始日期时间：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <input name="actualRentStartTime" id="actualRentStartTime" th:value="${#dates.format(entityRent.actualRentStartTime, 'yyyy-MM-dd')}" class="form-control" placeholder="yyyy-MM-dd" type="text">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">计划租赁结束时间：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <input name="planRentEndTime"  id="planRentEndTime" th:value="${#dates.format(entityRent.planRentEndTime, 'yyyy-MM-dd')}" class="form-control" placeholder="yyyy-MM-dd" type="text">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
<!--            <div class="form-group">    -->
<!--                <label class="col-sm-3 control-label">实际租赁结束时间：</label>-->
<!--                <div class="col-sm-8">-->
<!--                    <div class="input-group date">-->
<!--                        <input name="actualRentEndTime" th:value="${#dates.format(entityRent.actualRentEndTime, 'yyyy-MM-dd')}" class="form-control" placeholder="yyyy-MM-dd" type="text">-->
<!--                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="form-group">    -->
<!--                <label class="col-sm-3 control-label">计划租赁天数：</label>-->
<!--                <div class="col-sm-8">-->
<!--                    <input name="planRentSpan" th:field="*{planRentSpan}" class="form-control" type="text">-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="form-group">    -->
<!--                <label class="col-sm-3 control-label">实际租赁天数：</label>-->
<!--                <div class="col-sm-8">-->
<!--                    <input name="actualRentSpan" th:field="*{actualRentSpan}" class="form-control" type="text">-->
<!--                </div>-->
<!--            </div>-->
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">备注：</label>
                <div class="col-sm-8">
                    <input name="note" th:field="*{note}" class="form-control" type="text" required>
                </div>
            </div>
            <h4 class="form-header h4">出库单信息</h4>
            <div class="form-group">
                <div class="btn-group-sm" id="toolbar" role="group">
                    <a class="btn btn-success" onclick="addRentDevice()" shiro:hasPermission="system:link:add">
                        <i class="fa fa-plus"></i> 添加
                    </a>
                    <a class="btn btn-primary single disabled" onclick="$.operate.edit()" shiro:hasPermission="system:link:edit">
                        <i class="fa fa-edit"></i> 修改
                    </a>
                    <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="system:link:export">
                        <i class="fa fa-download"></i> 导出
                    </a>
                </div>
                <div class="col-sm-12 select-table table-striped">
                    <table id="bootstrap-table"></table>
                </div>
            </div>
<!--            <div class="form-group">    -->
<!--                <label class="col-sm-3 control-label">有效性</label>-->
<!--                <div class="col-sm-8">-->
<!--                    <input name="valid" th:field="*{valid}" class="form-control" type="text">-->
<!--                </div>-->
<!--            </div>-->
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <script th:inline="javascript">
        var prefix = ctx + "system/rent";
        $("#form-rent-edit").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/edit", $('#form-rent-edit').serialize());
            }
        }

        $("input[name='issueTime']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        $("input[name='planRentStartTime']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        $("input[name='actualRentStartTime']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        $("input[name='planRentEndTime']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        $("input[name='actualRentEndTime']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });
        //https://blog.csdn.net/javabro/article/details/81872755
        var editFlag = [[${@permission.hasPermi('system:link:edit')}]];
        var removeFlag = [[${@permission.hasPermi('system:link:remove')}]];
        var unitDatas = [[${@dict.getType('sys_unit')}]];
        var rentValidDatas = [[${@dict.getType('sys_rent_valid')}]];
        $(function() {
            var options = {
                url: ctx + "system/link/list",
                createUrl: ctx + "system/link/add",
                updateUrl: ctx + "system/link/edit/{id}",
                removeUrl: ctx + "system/link/remove",
                exportUrl: ctx + "system/link/export",
                modalName: "出库单",
                queryParams:queryParams,
                limit:1,                       // 需要配置 否则 是undefined
                offset: 10,                    // 需要配置 否则 是undefined
                order: "asc",
                columns: [{
                    checkbox: true
                },
                    {
                        field: 'id',
                        title: '主键ID',
                        visible: false
                    },
                    {
                        field: 'typeName',
                        title: '器材类型'
                    },
                    {
                        field: 'modeName',
                        title: '器材型号'
                    },{
                        field: 'unit',
                        title: '单位',
                        formatter:function (value,row,index){
                            return $.table.selectDictLabel(unitDatas, value);
                        }
                    },
                    {
                        field: 'deviceSerialNumber',
                        title: '器材编号'
                    },
                    {
                        field: 'planRentStartTime',
                        title: '计划租赁开始日期时间'
                    },
                    {
                        field: 'actualRentStartTime',
                        title: '实际租赁开始日期时间'
                    },
                    {
                        field: 'planRentEndTime',
                        title: '计划租赁结束时间'
                    },
                    {
                        field: 'actualRentEndTime',
                        title: '实际租赁结束时间'
                    },
                    {
                        field: 'planRentSpan',
                        title: '计划租赁天数'
                    },
                    {
                        field: 'actualRentSpan',
                        title: '实际租赁天数'
                    },
                    {
                        field: 'note',
                        title: '备注'
                    },
                    {
                        field: 'valid',
                        title: '状态',
                        formatter:function (value,row,index){
                            return $.table.selectDictLabel(rentValidDatas, value);
                        }
                    },
                    {
                        title: '操作',
                        align: 'center',
                        formatter: function(value, row, index) {
                            var actions = [];
                            actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                            // actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
                            return actions.join('');
                        }
                    }]
            };
            $.table.init(options);
        });
        function queryParams(params){
            var param = {
                rentId:$("#rentId").val(),
                pageSize:       params.limit,
                pageNum:        params.offset / params.limit + 1,
                searchValue:    params.search,
                orderByColumn:  params.sort,
                isAsc:          params.order
                // search:params.search,
                //可以是添加自己要帅选的列与pojo 属性对应
            };
            return param;
        }

        function addRentDevice(){
            layer.prompt({title: '请输入器材编号', formType: 0}, function(deviceSerialNumber, index){
                layer.close(index);
                //是否可以出租
                $.post(ctx + "system/device/selectEntityDeviceBySerialNumber", {serialNumber: deviceSerialNumber}, function(result) {
                    if (result.code == web_status.SUCCESS) {
                        var device = result.value;
                        if($.common.isEmpty(device)){
                            $.modal.alert("根据器材编号，查无此设备！");
                        }else{
                            var deviceValid = device.valid;
                            if(1 != deviceValid){
                                if(0 == deviceValid){
                                    $.modal.alert("添加设备还未采购入库，请重新输入编号！");
                                }else if(2 == deviceValid){
                                    $.modal.alert("添加设备还在出租中，请重新输入编号！");
                                }else if(3 != deviceValid){
                                    $.modal.alert("添加设备已经损害，请重新输入编号！");
                                }else{
                                    $.modal.alert("添加设备无法出租，请重新输入编号！");
                                }
                            }else{
                                table.set();
                                var url =  table.options.createUrl+"?deviceId="+device.id
                                    +"&rentId="+$("#rentId").val()
                                    +"&typeName="+device.typeName
                                    +"&modeName="+device.modeName
                                    +"&serialNumber="+device.serialNumber
                                    +"&planRentStartTime="+$("#planRentStartTime").val()
                                    +"&planRentEndTime="+$("#planRentEndTime").val()
                                    +"&actualRentStartTime="+$("#actualRentStartTime").val()
                                    +"&note="+device.note;
                                $.modal.open("添加" + table.options.modalName, url);
                            }
                        }
                    } else {
                        $.modal.msgError(result.msg);
                    }
                });
            });
        }
    </script>
</body>
</html>